<template>
	<!-- 综合分析 -->
	<view class="p-10">
		<view class="card">
			<uni-section type="line" class="mb-10" title="三违统计分析">
				<view class="charts-box">
					<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
				</view>
			</uni-section>
		</view>
		<view class="card">
			<uni-section type="line" class="mb-10" title="三违人员统计分析">
				<view class="flex s-center m-center">
					<uni-datetime-picker v-model="dateValue1" type="daterange" />
				</view>
				<view class="charts-box">
					<qiun-data-charts type="column" :opts="opts1" :chartData="chartData1" />
				</view>
			</uni-section>
		</view>
	</view>
</template>
<script setup>
import { ref, watch, computed } from 'vue';
import { threeViolationAnalyze, countByUser } from '@/api/hidden-danger.js';
import date from '@/utils/date.js';

let dateValue1 = ref([
	date(new Date(), 'YYYY-MM-DD', {
		M: -1
	}),
	date(new Date(), 'YYYY-MM-DD')
]);

let chartData = ref({}),
	opts = computed(() => {
		return {
			color: ['#FC8452', '#FAC858', '#1890FF', '#91CB74'],
			padding: [10, 0, 0, 0],
			dataLabel: false,
			legend: {
				show: true,
				position: 'top',
				padding: 0,
				margin: 0
			},
			title: {
				name: '',
				fontSize: 36,
				color: '#000'
			},
			subtitle: false,
			extra: {
				ring: {
					ringWidth: 30,
					activeOpacity: 0.5,
					activeRadius: 10,
					offsetAngle: 0,
					labelWidth: 10,
					border: true,
					borderWidth: 3,
					borderColor: '#FFFFFF'
				}
			}
		};
	});

let chartData1 = ref({}),
	opts1 = computed(() => {
		return {
			color: ['#1890FF', '#91CB74'],
			padding: [20, 0, 0, 0],
			dataLabel: false,
			legend: {},
			xAxis: {
				disableGrid: true
			},
			yAxis: {
				data: [
					{
						min: 0
					}
				]
			},
			extra: {
				column: {
					type: 'group',
					width: 30,
					activeBgColor: '#000000',
					activeBgOpacity: 0.08,
					labelPosition: 'insideTop'
				}
			}
		};
	});

const getData = async () => {
	try {
		const { data } = await threeViolationAnalyze({ type: 'year' });
		let res = {
			series: [
				{
					data: []
				}
			]
		};
		data.data.map((item) => {
			item.name = item.x;
			item.value = item.y;
		});
		res.series[0].data = data.data;
		chartData.value = JSON.parse(JSON.stringify(res));
		opts.value.title.name = data.data.reduce((a, b) => a + b.y, 0);
	} catch (e) {
		//TODO handle the exception
	}
};
getData();

const getData1 = async (params) => {
	try {
		const { data } = await countByUser(params);
		let res = {
			categories: data?.names,
			series: [
				{
					name: '一般三违',
					data: data?.normal
				},
				{
					name: '严重三违',
					data: data?.severity
				}
			]
		};
		chartData1.value = JSON.parse(JSON.stringify(res));
	} catch (e) {
		//TODO handle the exception
	}
};

watch(
	() => dateValue1.value,
	(val) => {
		getData1({
			startTime: val[0],
			endTime: val[1],
			pageNum: 1,
			pageSize: 9999
		});
	},
	{
		immediate: true
	}
);
</script>
<style lang="scss" scoped>
:deep(.u-radio-group--row) {
	justify-content: center;
}
</style>
